<template>
  <div>
    <section class="banner"></section>
    <section class="reason">
      <div class="reasonCon">
        <p class="resTitle">选择中酒云的五大理由</p>
        <div class="resContent">
          <div
            v-for="(i, k) in list"
            :key="k"
            :class="{ active: i.check }"
            @click="handleCheck(i)"
          >
            <div class="title">{{ i.title || "无" }}</div>
            <div class="content">{{ i.content || "无" }}</div>
          </div>
        </div>
      </div>
    </section>
    <section class="products">
      <div class="productsCon">
        <p>完善的产品体系</p>
        <p>400+ 款产品共筑华为云完善产品体系</p>
        <img src="@/assets/img/others/image67.png" />
      </div>
    </section>
    <section class="customerStories">
      <div class="customerStoriesCon">
        <p class="conTitle">客户案例</p>
        <div class="conContent">
          <div class="con-item" v-for="(item, index) in customerList" :key="index">
            <div class="title">
              {{ item.title || "无" }}
            </div>
            <div v-html="item.content" class="content" />
          </div>
        </div>
      </div>
    </section>
  </div>
</template>
<script setup lang="ts">
import { ref, onMounted } from "vue";
import { articleList } from "@/api/other";

const list = ref([
  {
    title: "高效稳定",
    content:
      "深厚的基础架构,自研的操作系统，多年技术锤炼和海量服务经验，为客户提供高性能、易运维、智能化、弹性化的云服务。",
    check: true,
  },
  {
    title: "安全可靠",
    content:
      "七大安全联合实验室团队，一体化智慧安全管理体系，助您建立系统性的安全防御机制。",
    check: false,
  },
  {
    title: "丰富场景",
    content:
      "从基础设施到行业应用领域，提供完善的产品体系，为各种业务场景提供全栈解决方案，助力业务腾飞。",
    check: false,
  },
  {
    title: "开放生态",
    content:
      "完整的合作伙伴生态体系，与产业链上下游通力合作，提供优质的服务和丰富的产品满足您全方位的业务需求。",
    check: false,
  },
  {
    title: "服务保障",
    content:
      "7*24小时高效服务保障，多元化的服务支持，提供专业的上云前、中、后全流程技术服务，让您的云上之旅更安心。",
    check: false,
  },
]);
const customerList = ref([]); // 客户案例列表

onMounted(() => {
  getCustomerList();
});

// 获取客户案例列表
const getCustomerList = () => {
  let data = {
    params: {
      pageNum: 1,
      pageSize: 120,
    },
    type: "CUSTOMER_STORIES",
  };
  articleList(data).then((res) => {
    let list = res.rows;
    list.forEach((i) => {
      i.content = removeHTMLTags(i.content);
    });
    customerList.value = list;
  });
};

// 去除html标签
const removeHTMLTags = (str) => {
  return str.replace(/<[^>]*>/g, "");
};

// 切换选中
const handleCheck = (row) => {
  list.value.forEach((i) => (i.check = false));
  row.check = true;
};
</script>
<style lang="less" scoped>
.banner {
  width: 100%;
  height: 472px;
  background: url("@/assets/img/others/Group2171.png") no-repeat center center / 100% 100%;
}
.reason {
  width: 100%;
  height: 488px;
  background: url("@/assets/img/others/broker2Fp.png") no-repeat center center / 100% 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  .reasonCon {
    width: 1200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    .resTitle {
      width: 100%;
      height: 50px;
      font-size: 39px;
      font-weight: 600;
      justify-content: center;
      display: flex;
      align-items: center;
    }
    .resContent {
      width: 100%;
      height: 268px;
      display: flex;
      justify-content: space-between;
      > div {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        padding: 40px 20px;
        &:hover {
          cursor: pointer;
        }
        .title {
          color: #4f5b74;
          font-size: 26px;
          font-weight: bold;
        }
        .content {
          color: #909090;
        }
      }
      .active {
        .title,
        .content {
          color: #fff;
        }
        background: url("@/assets/img/client/solution/youshibg.png") no-repeat center
          center / 100% 100%;
      }
    }
  }
}
.products {
  width: 100%;
  height: 605px;
  display: flex;
  justify-content: center;
  background: url("@/assets/img/others/image60.png") no-repeat center center / 100% 100%;
  .productsCon {
    width: 749px;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding-top: 50px;
    p:nth-child(1) {
      font-size: 39px;
      font-weight: 600;
    }
    p:nth-child(2) {
      font-size: 16px;
      color: #4f5b74;
    }
    img {
      width: 749px;
      height: 432px;
    }
  }
}
.customerStories {
  width: 100%;
  min-height: 804px;
  display: flex;
  justify-content: center;
  background: url("@/assets/img/others/image68.png") no-repeat center center / 100% 100%;
  .customerStoriesCon {
    width: 1200px;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    .conTitle {
      width: 100%;
      height: 50px;
      font-size: 39px;
      font-weight: 600;
      margin: 50px 0;
      justify-content: center;
      display: flex;
      align-items: center;
    }
    .conContent {
      width: 100%;
      height: auto;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      .con-item {
        width: 386px;
        height: 212px;
        padding: 20px;
        background-color: #fff;
        box-shadow: -5px 5px 20px 0px #e3e8f0;
        margin-bottom: 20px;
        margin-right: 20px;
        transition: all 0.5s;
        &:hover {
          cursor: pointer;
          box-shadow: -5px 5px 20px 0px #b5c1d2;
        }
        &:nth-child(3n) {
          margin-right: 0;
        }
        .title {
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          color: #000;
          font-size: 16px;
          margin-bottom: 20px;
        }
        .content {
          overflow: hidden;
          display: -webkit-box;
          text-overflow: ellipsis;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 4;
          color: #4f5b74;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
